<template>
    <div class="detail_shop">
        <img :src="message.logo" alt="" class="shop_logo">
        <p class="shop_name">{{message.name}}</p>
        <span class="fans">粉丝  {{message.fans}}</span>
        <div class="appraise">
            <div class="appraise_item">
                <p>{{message.sells}}</p>
                <p style="font-size: 14px">总销量</p>
            </div>
            <div class="all_good">
                <p style="margin-left: 15px">{{message.goodsCount}}</p>
                <p style="font-size: 14px">全部宝贝</p>
            </div>
            <div class="shop_score">
                <ul>
                    <li v-for="(item,index) in message.score" :key="index">
                        <span>{{item.name}}</span>
                        <span class="score" :class="{betterScore: item.isBetter}">{{item.score}}</span>
                        <span :class="{scoreB:item.isBetter}" class="scoreA">{{item.isBetter ? '高' : '低'}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DetailShop",
        props:{
            message:{}
        }
    }
</script>

<style scoped>
    .detail_shop{
        margin-top: 15px;
        position: relative;
        padding-bottom: 10px;
        border-bottom: 4px gainsboro solid;
    }
    .shop_logo{
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-left: 20px;
    }
    .shop_name{
        margin-left: 10px;
        font-size: 12px;
        top: 20px;
        display: inline-block;
        position: absolute;
    }
    .fans{
        position: absolute;
        right: 30px;
        top:20px;
        color: lightpink;
        font-weight: bolder;
    }
    .appraise{
        display: flex;
        justify-content: space-around;
        margin-top: 15px;
    }
    .appraise_item{
        flex: 1;
        margin-left: 30px;
        margin-top: 30px;
    }
    .all_good{
        flex: 1;
        margin-top: 30px;
    }
    .shop_score{
        width: 120px;
        font-size: 14px;
    }
    .shop_score ul li{
        list-style: none;
        margin-top: 10px;
    }
    .score{
        color:  lightgreen;
        margin-left: 5px;
    }
    .betterScore{
        color: red;
    }
    .scoreA{
        background-color: green;
        color: white;
        position:absolute;
        right: 10px;
    }
    .scoreB{
        background-color: red;
        color: white;
    }

</style>